/**
 * 实现一个 Table 组件，使用如下：
 *
 *  <Table
 *    columns={[{ label: '姓名', key: 'name' }, { label: '年龄', key: 'age' }]}
 *    data={[{ name: '张三', age: 18 }, { name: '里斯', age: 19 }, { name: '王五', age: 20 }]}
 *  />
 */

import { Component } from "react";
import Table from "./components/Table";

export default class App extends Component {
  state = {
    columns: [
      { label: "性别", key: "sex" },
      { label: "年龄", key: "age" },
      { label: "姓名", key: "name" },
    ],

    data: [
      { name: "张三", age: 18, sex: "男" },
      { name: "里斯", age: 19, sex: "女" },
      { name: "王五", age: 20, sex: "不详" },
    ],
  };

  render() {
    return (
      <div>
        <h1>Table 组件</h1>

        <Table columns={this.state.columns} data={this.state.data} />

        <hr />

        <Table
          columns={[
            { label: "书名", key: "bookName" },
            { label: "作者", key: "bookAuthor" },
          ]}
          data={[
            { id: 1, bookName: "西游记", bookAuthor: "张三" },
            { id: 2, bookName: "水浒传", bookAuthor: "里斯" },
          ]}
        />
      </div>
    );
  }
}
